<template>
  <a-input
    ref="refInput"
    :placeholder="placeholder"
    @focus="focus"
    :model-value="inputValue"
  />
  <ClassifySelectModal
    ref="refModal"
    :classify-tree="classifyTree"
    :defaultValue="value"
    @handleOk="handleOk"
  />
</template>
<script lang="ts" setup>
import { isArray } from 'lodash';
import ClassifySelectModal from './ClassifySelectModal.vue';
const props = withDefaults(
  defineProps<{
    value?: number | number[]; //v-model
    classifyTree: any[];
    placeholder?: string;
  }>(),
  {
    list: [],
    disabled: false,
    placeholder: ''
  }
);

//输入框获得聚焦打开弹出框
const refInput = ref();
const refModal = ref();
const focus = () => {
  refInput.value.blur();
  refModal.value.visible = true;
};
const inputValue = computed(() => {
  let text = '';
  const getSelectNode = (tree: any[]) => {
    if (isArray(tree)) {
      tree.forEach((element: any) => {
        if (element.id === props.value) {
          text = element.classifyName;
        }
        getSelectNode(element.children);
      });
    }
  };
  getSelectNode(props.classifyTree);
  return text;
});
//弹框提交修改value
const emit = defineEmits(['update:value']);
const handleOk = (item: any) => {
  emit('update:value', item.id);
};
</script>
<style></style>
